<template>
  <div class="shop-content">
    <ul class="project-list" v-infinite-scroll="load" infinite-scroll-distance="30px">
      <li v-for="item, index in projectLoadArr" :key="item.pro_id" @click="projectClickEvent(item.pro_id)">
        <el-card class="box-card project">
          <div class="project-img">
            <el-image style="width: 150px; height: 150px" :src="'http://127.0.0.1:3000/uploads' + item.pro_cover"
              fit="fill" slot="images" />
          </div>
          <div class="project-message">
            <h3>{{ item.pro_title }}</h3>
            <div class="project-message-overview">
              <span>{{ item.pro_biography }}</span>
            </div>
            <div class="project-message-price">价格: <span style="font-weight: 700;">{{ item.price }}</span></div>
          </div>
        </el-card>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import { IProjectInfo } from "./type"
import Service from "@/utils/axios"
let arr: any[] = [];


// 瀑布流
const count = ref(8)
const projectLoadArr = ref<any[]>([])

// 路由
const route = useRoute()
const router = useRouter()

let load = () => {
  // tag
  if (route.query.proTag) {
    if (route.query.proTag == '全部') {
      projectLoadArr.value.push(...arr.slice(count.value, count.value += 8))
    } else {
      projectLoadArr.value.push(...(arr.slice(count.value, count.value += 8).filter(item => (item.tags).includes(route.query.proTag))))
    }
  }

  // search
   else if (route.query.proSearch) {
    // projectLoadArr.value = projectLoadArr.value.filter(item => (item.pro_title).includes(route.query.proSearch))
    projectLoadArr.value.push(...(arr.slice(count.value, count.value += 8).filter(item => (item.pro_title).includes(route.query.proSearch))))
  } else {
    projectLoadArr.value.push(...arr.slice(count.value, count.value += 8))
  }
}
// 获取全部项目信息
const handleGetProjectInfo = (filter?: string) => {
  Service.get('/bkapi/projectInfo/getProjectinfoAll?offset=1').then((res: any) => {
    arr = ([...res.data?.rows])
    // tag
    if (route.query.proTag) {
      if (route.query.proTag == '全部') {
        projectLoadArr.value.push(...arr.slice(0, 8))
      } else {
        let resultArr = arr.filter(item => (item.tags).includes(route.query.proTag))
        projectLoadArr.value.push(...(resultArr.slice(0, 8).filter(item => (item.tags).includes(route.query.proTag))))
      }
    }
    // search
     else if(filter) {
      let resultArr = arr.filter(item => (item.pro_title).includes(route.query.proSearch))
      projectLoadArr.value.push(...(resultArr.slice(0, 8)))
    } else {
      projectLoadArr.value.push(...arr.slice(0, 8))
    }
  })
}

// 项目点击事件 跳转到项目详情页
const projectClickEvent = (projectId: string) => {
  console.log('被点击的项目id', projectId)
  router.push({
    name: 'Project',
    params: { id: projectId }
  })
}

onMounted(() => {
  // 请求项目信息
  if (route.query.proSearch) {
    projectLoadArr.value.length = 0
    count.value = 8;
    arr = [];
    // console.log('projectLoadArr.value', projectLoadArr.value)
    handleGetProjectInfo(route.query.proSearch as string)
  } else {
    handleGetProjectInfo()
  }
})
</script>

<style lang="less" scoped>
@border-color: #dcdfe6; //边框默认颜色

.project-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 30px;

  &>li {
    width: calc((100% - 80px) / 4);
    margin-right: 26px;
    margin-bottom: 14px;
  }

  &>li:nth-of-type(4n+0) {
    margin-right: 0;
  }
}

.project {
  height: 400px;
  margin: 0 auto;

  &> :deep(.el-card__body) {
    // position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .project-img {
    margin: 0 auto;
    margin-top: 30px;
    width: 150px;
    height: 150px;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 5px 5px 5px 5px @border-color;
  }

  .project-message {
    margin: 0 auto;
    margin-top: 20px;
    width: 150px;
    height: 150px;
    padding: 15px;
    border-top: 2px solid @border-color;

    position: relative;

    h3 {
      font-size: 16px;
    }

    .project-message-overview {
      height: 40px;
      margin-top: 10px;
      display: -webkit-box !important;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .project-message-price {
      position: absolute;
      bottom: 50px;
      left: 10;
      font-size: 16px;
      color: #ff723e;
    }
  }

}
</style>